<style>

</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div id="searchDIV">
                搜索框
            </div>
            <table class="layui-table" id="tableDiv" lay-filter="tableDiv"></table>
        </div>
    </div>
</div>
<!-- 搜查条件框-->
<script type="text/html" id="searchContent">
    <div class="layui-form lay-header">
        <div class="toolbar">
            <div class="layui-form-item lay-query-content" style="height: auto;width: auto">
                <div class="lay-search-box">
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <select name="supplierCategory" id="supplierCategory" lay-filter="supplierCategory">
                                <option value="">请选择供应商分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <select name="exchangeType" id="exchangeType" lay-filter="exchangeType">
                                <option value="">请选择换货类型</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <select name="status" id="status" lay-filter="status">
                                <option value="">按状态筛选</option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input name="supplierName" class="layui-input" type="text"
                                   placeholder="请输入供应商名称"/>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input name="exchangeRecordCode" class="layui-input" type="text"
                                   placeholder="请输入换货记录编码"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline mr0">
                            <input name="exchangeOrderCode" class="layui-input" type="text"
                                   placeholder="请输入换货订单编码"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label ">时间段：</label>
                        <div class="layui-input-inline mr0">
                            <input name="createTime" id="pTime" class="layui-input date-icon" type="text"
                                   placeholder="选择时间" style="width: 200px" readonly/>
                        </div>
                        <input name="startDate" id="sTime" type="hidden" placeholder="开始日期"/>
                        <input name="endDate" id="eTime" type="hidden" placeholder="结束日期"/>

                    </div>
                    <div class="layui-inline" style="margin-left: 20px">
                        <div class="layui-input-inline mr0">
                            <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                    lay-submit layui-form-keyDownSearch="true">查询
                            </button>
                            <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                            </button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div class="lay-btn-rows">
            <div class="lay-btn-box">
                <div class="lay-btn-lt">
                    <button id="contractBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
                </div>
                <div class="lay-btn-rt">

                </div>
            </div>
        </div>
    </div>
</script>
<!--表格操作列-->
<script type="text/html" id="TableBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload', 'tree', 'laytpl', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var syncProductName = "";
        var syncProductId = 0;
        $(this).removeAttr("lay-key");//时间框一点就消失处理

        laytpl(searchContent.innerHTML).render({}, function (html) {
            $('#searchDIV').html(html);
            laydate.render({
                elem: '#pTime',
                type: 'date',
                range: true,
                done: function (value, date, endDate) {
                    if (value) {
                        var dateValue = value.split(" - ");
                        $("#sTime").val(dateValue[0] + " 00:00:00");
                        $("#eTime").val(dateValue[1] + " 23:59:59");
                    } else {
                        $("#sTime").val();
                        $("#eTime").val();
                    }
                }
            });
            form.render('select')
        });
        let data = [];
        for (let i = 1; i <= 25; i++) {
            data.push({
                exchangeRecordCode: 'ER' + String(i).padStart(3, '0'),
                exchangeType: i % 2 === 0 ? 'Replacement' : 'Refund',
                logisticsRecordCode: 'LR' + String(i).padStart(3, '0'),
                relatedPurchaseOrderCode: 'PO' + String(i).padStart(3, '0'),
                supplierName: 'Supplier ' + i,
                exchangeRemark: 'Remark for exchange ' + i,
                submitTime: `2024-11-${String(i).padStart(2, '0')} 12:00:00`,
                exchangePerson: 'Person ' + i,
                exchangeAmount: (Math.random() * 1000).toFixed(2),
                status: i % 3 === 0 ? 'Completed' : 'Pending'
            });
        }
        table.render({
            elem: '#tableDiv',
            data: data,
            page: true,
            cols: [[
                {field: 'exchangeRecordCode', title: '换货记录编号', fixed: 'left'},
                {field: 'exchangeType', title: '换货类型'},
                {field: 'logisticsRecordCode', title: '物流记录编号'},
                {field: 'relatedPurchaseOrderCode', title: '关联采购订单编号'},
                {field: 'supplierName', title: '供应商名称'},
                {field: 'exchangeRemark', title: '换货备注'},
                {field: 'submitTime', title: '提交时间', sort: true},
                {field: 'exchangePerson', title: '换货人'},
                {field: 'exchangeAmount', title: '换货金额', sort: true},
                {field: 'status', title: '状态'},
                {align: 'center', toolbar: '#TableBar', title: '操作', fixed: 'right'}

            ]]
        })
        $('#contractBtnAdd').click(function () {
            openFormFun()
        })
        form.on('submit(formSubSearchLog)',function (data){
            console.log(123,data)
        })

        function openFormFun(data) {
            admin.formOpen({
                area: '1200px',
                offset: '65px',
                title: data ? '编辑产品明细' : '添加产品明细',
                path:'components/sell/exchangeRecords/exchangeRecordsForm.html'
            })

        }
    })
</script>